<template>
    <div class="personal-container">
        <el-card style="width: 40%" shadow="always">
            <template #header>
                <div class="card-header">
                    <span>个人中心</span>
                </div>
            </template>
            <div class="personal-center">
                <ul class="list-group list-group-striped">
                    <li class="list-group-item" v-for="(item, index) in userInfo" :key="index">
                        <el-icon>
                            <component :is="item.icon"></component>
                        </el-icon>
                        <span>{{ item.label }} ：</span>
                        <span>{{ item.value }}</span>
                    </li>
                </ul>
            </div>
        </el-card>
        <div class="divider"></div>
        <el-card style="width: 60%" shadow="always">
            <template #header>
                <div class="card-header">
                    <span>基本信息</span>
                </div>
            </template>
            <div class="personal-center">
                <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
                    <el-tab-pane label="基本信息" name="baseInfo">
                        <BaseInfo></BaseInfo>
                    </el-tab-pane>
                    <el-tab-pane label="修改密码" name="updatePwd">
                        <ModifyPwd></ModifyPwd>
                    </el-tab-pane>

                </el-tabs>
            </div>
        </el-card>
    </div>

</template>
<script setup lang="ts" name="personal">
import BaseInfo from "./_components/baseInfo.vue";
import ModifyPwd from "./_components/modifyPwd.vue";
import useAppStore from '@/stores/modules/app';
import { useUserStore } from '@/stores/modules/user';
import { TabsPaneContext } from 'element-plus';
import { computed, ref } from 'vue'
const sexOptions = computed(() => useAppStore().sysDict.sys_sex || [])
const userInfo = computed(() => [
    { icon: 'user', label: '名称', value: useUserStore().userInfo.realName },
    { icon: 'UserFilled', label: '性别', value: formatterSex(useUserStore().userInfo.gender || '') },
    { icon: 'phone', label: '手机号', value: useUserStore().userInfo.mobile },
    { icon: 'message', label: '邮箱', value: useUserStore().userInfo.email },
    { icon: 'CollectionTag', label: '部门', value: useUserStore().userInfo.deptName }
])

const formatterSex = (gender: string): string => {
    if (!gender) {
        return '';
    }
    const result = sexOptions.value?.find((item: SysDictDataEntity) => item.dictValue == gender)?.dictLabel || ""
    return result
}

const activeName = ref('baseInfo')
const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}
</script>
<style lang="scss" scoped>
.personal-container {
    display: flex;
    width: 100%;
    .list-group-striped>.list-group-item {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .list-group {
        padding-left: 0px;
        list-style: none;
    }

    .list-group-item {
        border-bottom: 1px solid #e7eaec;
        margin-bottom: -1px;
        padding: 11px 0px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-self: flex-start;

        .el-icon {
            margin-right: 10px;
            font-size: 20px;
        }

        span {
            margin-right: 10%;
        }

        span:nth-child(2) {
            font-weight: bolder;
        }
    }

    .divider {
        width: 10px;
    }
}
</style>